<template>
    <div class="con">
        <p class="titlelist6_10">
            <!-- 权益管理 -->
            <span style="color: #999"></span>首页
        </p>
        <div class="content">
            <div class="cons">
                <div class="con_left">
                    <div class="con_left_top">
                        <div class="left_top" v-for="(item, index) in tableData" :key="index">
                            <img src="../../assets/images/indexIcon1.png" class="left_top_img" v-if="index==0"/>
                            <img src="../../assets/images/indexIcon2.png" class="left_top_img" v-if="index==1"/>
                            <img src="../../assets/images/indexIcon3.png" class="left_top_img" v-if="index==2"/>
                            <div class="left_top_num">
                                <p>{{ item.totalPerson }}</p>
                                <p style="margin-top:10px">{{ item.name }}（{{ item.unit }}）</p>
                            </div>
                            <div class="left_top_bai">
                                <div>
                  <span style="float:left"
                  >昨日 新增 {{ item.yesterdayPerson }}{{ item.unit }}</span
                  >
                                    <div class="box">
                                        <img
                                                v-if="item.yesterdayPercentage >= 0"
                                                src="../../assets/images/up.png"
                                        />
                                        <img v-else src="../../assets/images/down.png"/>
                                        <b>{{ Math.abs(item.yesterdayPercentage) }}%</b>
                                    </div>
                                </div>
                                <div>
                                    <span style="float:left">今日 新增 {{ item.todayPerson }}{{ item.unit }}</span>
                                    <div class="box">
                                        <img
                                                v-if="item.todayPercentage >= 0"
                                                src="../../assets/images/up.png"
                                        />
                                        <img v-else src="../../assets/images/down.png"/>
                                        <b>{{ Math.abs(item.todayPercentage) }}%</b>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="con_left_bottom">
                        <div class="con_left_bottom_title">
                            <img src="../../assets/images/school.png" class="image"/>
                            <p class="title" style="line-height:65px">XXXXX</p>
                        </div>
                        <div class="school" v-for="(items,indexs) in schoolList" :key="indexs">
                            <div class="school_title">
                                <div class="school_sign"></div>
                                <p class="title_con">{{items.itemName}}</p>
                                <span class="title_con1" @click="more(items)">查看更多></span>
                            </div>
                            <div class="school_content">
                                <div class="school_list" v-for="(itemes,indexes) in items.contentList" :key="indexes">
                                    <p v-if="items.itemName=='XXXXX'" class="content_title">
                                        <span @click="fileDetail(itemes)"
                                              class="fileDetails">{{itemes.resourceTitle}}</span>
                                    </p>
                                    <p v-if="items.itemName=='XXXXX'" class="time">{{itemes.createDate}}</p>
                                    <span class="content_title1" v-else @click="detailsQuestion(itemes)">{{itemes.typeName}} ></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 待处理事项 -->
                <div class="con_right">
                    <div class="right_title">
                        <img class="rigth_img" src="../../assets/images/daiban.png"/>
                        <p class="right_p">待处理事项</p>
                    </div>
                    <div class="right_content" v-for="(ite,ind) in witeList" :key="ind"
                         :class="ite.flag=='1'?'right_content':ite.flag=='2'?'right_content1':'right_content2'">
                        <div class="right_content_top">
                            <img style="float:left" src="../../assets/images/daiban.png"/>
                            <p style="float:left">{{ite.name}}</p>
                        </div>
                        <div class="right_content_bottom cur" @click="handUlr(ite.flag)">
                            <p>{{ite.number}}</p>
                            <img
                                    style="float:right;margin-top:10px;margin-right:10px"
                                    src="../../assets/images/next.png"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import https from "../../plugins/https.js";

    export default {
        data() {
            return {
                tableData: [],
                schoolList: [],
                witeList: []
            }
        },
        created() {
            this.first()
            this.school()
            this.wite()
        },
        methods: {
            handUlr(num) {
                let url;
                if (num == "1") {
                    url = "withdrawList"
                } else if (num == "2") {
                    url = "mallOrderDelivery"
                } else if (num == "3") {
                    url = "orderSent"
                }
                this.$router.push({
                    name: url,
                    query: {
                        status: "0002"
                    }
                })
            },
            // 跳转到详情
            fileDetail(val) {
                console.log(val)
                this.$router.push({
                    name: "fileDetails",
                    query: {
                        id: val.id
                    }
                })
            },

            first() {
                var _this = this;
                _this
                    .axios({
                        //axios请求
                        method: "post",
                        url: "/api/dataStatistics/homePageStatistics",
                    })
                    .then(res => {
                        // alert(JSON.stringify(d))
                        // console.log(d)
                        if (res.data.code == "0000") {
                            res.data.data.forEach((item, index) => {
                                if (item.todayPercentage == "0E-8") {
                                    item.todayPercentage = 0;
                                }
                                if (item.yesterdayPercentage == "0E-8") {
                                    item.yesterdayPercentage = 0;
                                }
                            });
                            for (let i = 0; i < res.data.data.length; i++) {
                                res.data.data[i].iconImg = "../../assets/images/indexIcon" + (i + 1) + ".png"
                            }
                            console.log(res.data.data)

                            _this.tableData = res.data.data;
                        }
                    })
                    .catch();
            },
            school() {
                https.schoolStatisticsTotalQuery().then(res => {
                    if (res.data.code == "0000") {
                        this.schoolList = res.data.data
                    } else {
                        layer.open({
                            content: res.data.msg,
                            skin: "msg",
                            time: 1, //1秒后自动关闭
                        });
                    }
                })
            },
            wite() {
                https.thingsStatisticsTotalQuery().then(res => {
                    if (res.data.code == "0000") {
                        this.witeList = res.data.data
                    } else {
                        layer.open({
                            content: res.data.msg,
                            skin: "msg",
                            time: 1, //1秒后自动关闭
                        });
                    }
                })
            },
            // 查看更多
            more(val) {
                if (val.itemCode == "LM001") {
                    this.$router.push({
                        name: "moreSchool"
                    })
                } else if (val.itemCode == "LM002") {
                    this.$router.push({
                        name: "questionList"
                    })
                }
            },
            detailsQuestion(val) {
                this.$router.push({
                    name: "questionDetail",
                    query: {
                        uid: val.uid
                    }
                })
            }
        }
    };
</script>

<style scoped>
    .content {
        background: #f9fafc;
    }

    .cur {
        cursor: pointer;
    }

    .cons {
        margin-left: 20px;
        width: 1670px;
        height: 950px;
    }

    .con_left {
        width: 1236px;
        height: 100%;
        /* background: #c33; */
        float: left;
    }

    .fileDetails {
        cursor: pointer;
    }

    .con_left_top {
        /* background: #fff; */
        margin-top: 20px;
        width: 100%;
        height: 200px;
        float: left;
    }

    .left_top {
        background: #fff;
        width: 400px;
        height: 100%;
        float: left;
        margin-right: 16px;
    }

    .left_top_img {
        float: left;
        width: 80px;
        height: 80px;
        margin-top: 60px;
        margin-left: 20px;
    }

    .left_top_num {
        float: left;
        width: 100px;
        margin-left: 10px;
        margin-top: 70px;
    }

    .left_top_bai {
        float: left;
        width: 180px;
        margin-left: 10px;
        margin-top: 70px;
    }

    .left_top_bai div {
        float: left;
        margin-top: 5px
    }

    .left_top:last-child {
        margin-right: 0;
    }

    .con_left_bottom {
        float: left;
        /* height: 699px; */
        height: 390px;
        width: 100%;
        margin-top: 20px;
        background: #fff;
    }

    .con_left_bottom_title {
        height: 65px;
        border: 1px solid #ebeef5;
        float: left;
        width: 100%;
    }

    .image {
        width: 22.9px;
        height: 17.32px;
        line-height: 65px;
        display: block;
        margin-left: 20px;
        margin-top: 22.84px;
        float: left;
    }

    .title {
        font-size: 18px;
        font-weight: bold;
        margin-left: 5px;
        float: left;
    }

    .school {
        width: 586px;
        height: 288px;
        margin-top: 19px;
        margin-left: 19px;
        border: 1px solid #ebeef5;
        float: left;
    }

    .school_title {
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #ebeef5;
        float: left;
    }

    .school_sign {
        width: 3px;
        height: 15px;
        background: #7698ff;
        border-radius: 2px;
        margin-left: 20px;
        float: left;
        margin-top: 22.5px;
    }

    .school .title_con {
        font-size: 16px;
        font-weight: 400;
        float: left;
        margin-left: 5px;
        line-height: 60px;
    }

    .school .title_con1 {
        font-size: 16px;
        font-weight: 400;
        float: right;
        margin-right: 10px;
        line-height: 60px;
        cursor: pointer;
        color: #C0C4CC
    }

    .school_content {
        float: left;
        height: 227px;
        width: 100%;
    }

    .content_title {
        line-height: 44px;
        width: 448px;
        height: 44px;
        float: left;
        font-size: 14px;
        margin-left: 20px;
    }

    .content_title1 {
        line-height: 44px;
        cursor: pointer;
        width: 100%;
        height: 44px;
        float: left;
        font-size: 14px;
        margin-left: 20px;
    }

    .time {
        line-height: 44px;
        height: 44px;
        width: 85px;
        float: right;
        font-size: 14px;
        margin-right: 10px;
    }

    .school_list {
        height: 44px;
        width: 100%;
    }

    .con_right {
        float: left;
        height: 100%;
        width: 400px;
        margin-left: 20px;
        margin-top: 20px;
        background: #fff;
    }

    .right_title {
        float: left;
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #ebeef5;
    }

    .rigth_img {
        float: left;
        margin-top: 19px;
        margin-left: 20px;
    }

    .right_p {
        float: left;
        line-height: 60px;
        margin-left: 5px;
        font-size: 18px;
        font-weight: bold;
    }

    .right_content {
        float: left;
        width: 360px;
        height: 140px;
        margin: 20px 20px 0;
        background: #61DBA0
    }

    .right_content1 {
        float: left;
        width: 360px;
        height: 140px;
        margin: 20px 20px 0;
        background: #8899CC
    }

    .right_content2 {
        float: left;
        width: 360px;
        height: 140px;
        margin: 20px 20px 0;
        background: #FF8C8C
    }

    .right_content_top {
        float: left;
        width: 100%;
        height: 26px;
        margin-top: 20px;
        margin-left: 20px;
    }

    .right_content_top p {
        font-size: 14px;
        font-weight: 400;
        margin-left: 5px;
        color: #fff;
    }

    .right_content_bottom {
        float: left;
        height: 52px;
        width: 100%;
        margin-top: 10px;
    }

    .right_content_bottom p {
        font-size: 40px;
        font-weight: bold;
        margin-left: 60px;
        margin-top: 10px;
        float: left;
        color: #fff;
    }

    .box {
        display: block;
        min-width: 20%;
        float: left;
        margin-top: 0px !important
    }

    .box img {
        width: 18px;
        height: 16px;
        font-weight: bold;
        padding-bottom: 3px;
    }

    .con_right > .right_content:first-child {
        background: #61DBA0
    }

    /* .right_content:first-child{
      background: #61DBA0 !important;
    } */
</style>
